<template>
  <div>
    <div class="toptop">
      <div>
        <span>
          <span style="margin-right: 24px;">公司</span>
          <el-select v-model="companyId" placeholder="请选择">
            <el-option v-for="(item, index) in companylist" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </span>
      </div>
      <el-button size="small" class="bottom_all" @click="saveBind()">保存</el-button>
    </div>
    <div class="info" style="display: flex;">
      <div class="left">
        <div class="nav">
          <template v-for="(item, index) in leftList">
            <div :key="index" :style="'width:' + 100 / leftList.length + '%'" :class="item.value == dataType ? 'left-active' : ''" @click="changeindex(item.value)">{{ item.text }}</div>
          </template>
        </div>
        <!-- 数据 -->
        <div class="radio leftitem">
          <el-radio-group v-model="showleftitemId" @change="changeleft">
            <template v-for="(item, index) in leftitemList">
              <div :key="index" class="radio-bg">
                <el-radio :label="item.id">{{ item.name }}-{{item.type}}</el-radio>
              </div>
            </template>
          </el-radio-group>
        </div>
      </div>
      <div class="center"></div>
      <div class="right">
        <div class="items">
          <div class="item">
            <div class="item-title">检验类别</div>
            <div class="radio">
              <el-radio-group v-model="showtypesId" @change="changetypesId()">
                <template v-for="(item, index) in table.types">
                  <div :key="index" class="radio-bg">
                    <el-radio :label="item.id">
                      <div :class="showtable.some(a => a.typeId == item.id) ? 'active' : 'none'"></div>
                      {{ item.sType }}
                    </el-radio>
                  </div>
                </template>
              </el-radio-group>
            </div>
          </div>
          <div class="item-hr"></div>
          <div class="item">
            <div class="item-title">检验项目</div>
            <div class="radio">
              <el-checkbox-group v-model="itemId" @change="change1()">
                <template v-for="(item, index) in table.item">
                  <div :key="index" class="radio-bg">
                    <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                  </div>
                </template>
              </el-checkbox-group>
            </div>
          </div>
          <div class="item-hr"></div>
          <div class="item">
            <div class="item-title">检验要求</div>
            <div class="radio">
              <el-checkbox-group v-model="requireId" @change="change1()">
                <template v-for="(item, index) in table.require">
                  <div :key="index" class="radio-bg">
                    <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
                  </div>
                </template>
              </el-checkbox-group>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  productqueryPage,
  getCheckTypeList,
  getBindInfoList,
  getCheckProjectList,
  saveOrUpdRawBindInfo,
} from "@/api/smart/specialmaterial/quality.js";
import { permissionsCompanyList } from "@/api/common.js";
export default {
  data() {
    return {
      UserInfo: '',
      leftList: [
        {
          text: "特材原料",
          value: 1,
        },
        {
          text: "特材成品",
          value: 2,
        },
      ],
      companylist: [],
      companyId: "",
      leftitemList: [],
      leftitemId: "",
      showleftitemId: "",
      table: {
        types: [],
        item: [],
        require: [],
      },
      showtable: [],
      showtypesId: "",
      typesId: "",
      itemId: [],
      requireId: [],
      loading: false,
      itemList: [],
      requireList: [],
      dataType: 1,
      oldtypes: [],
    };
  },
  watch: {
    dataType: {
      handler() {
        this.initQualityType()
      },
      deep: false,//是否开启深度监听一般false
      // immediate: true,//首次赋值是否触发
    },
    companyId() {
      this.getlist();
      this.init()
      this.initQualityType()
    },
    leftitemId() {
      let _this = this;
      if (_this.leftitemId) {
        _this.getlist();
      }
    },
  },
  async created() {
    this.companylist = await permissionsCompanyList()
    this.companyId = this.companylist[0].id
    this.initQualityType()
  },
  methods: {
    /**
     * @Description: 获取原物料或者成品
     * @param {*}
     * @Author: wangwangwang
     */
    initQualityType() {
      let _this = this;
      productqueryPage({ dataType: this.dataType, page: 1, pageSize: 9999, companyId: this.companyId }).then((res) => {
        this.leftitemList = res.data.data.map(res => {
          let obj = {
            id: res.id,
            name: res.productName,
            type: res.type
          }
          return obj
        });
        _this.leftitemId = "";
        _this.showleftitemId = "";
        _this.showtypesId = "";
        _this.typesId = "";
        _this.itemId = [];
        _this.requireId = [];
        _this.showtable = [];
      });
      getCheckTypeList({}).then((res) => {
        this.oldtypes = JSON.parse(JSON.stringify(res.data.data));
        if (this.dataType == 1) {
          console.log(this.oldtypes);
          this.table.types = this.oldtypes.filter((res) => res.fType == '特材原料')
        } else {
          this.table.types = this.oldtypes.filter((res) => res.fType == '特材成品')
        }
      });
    },
    change1() {
      if (!this.showtypesId || !this.showleftitemId) {
        this.$message({
          message: "请先选择物料和检验类别",
          type: "warning",
        });
        this.itemId = [];
        this.requireId = [];
        return;
      }
      console.log(this.requireId);
      this.loading = true;
    },
    /*数据保存提示*/
    changeleft() {
      let _this = this;
      if (this.companyId == "") {
        this.$message({
          message: "请选择公司",
          type: "warning",
        });
        return;
      }
      if (_this.loading) {
        _this
          .$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            cancelButtonClass: "bottom_all_two",
            confirmButtonClass: "bottom_all",
            type: "warning",
          })
          .then(() => {
            _this.showleftitemId = _this.leftitemId;
            _this.saveBind();
          })
          .catch(() => {
            _this.leftitemId = _this.showleftitemId;
            _this.loading = false;
          });
        return;
      }
      _this.leftitemId = _this.showleftitemId;
    },
    changetypesId() {
      let _this = this;
      if (this.companyId == "") {
        this.$message({
          message: "请选择公司",
          type: "warning",
        });
        return;
      }
      if (_this.loading) {
        this.$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            _this.showtypesId = _this.typesId;
            _this.saveBind();
          })
          .catch(() => {
            _this.typesId = _this.showtypesId;
            _this.getendlist();
            _this.loading = false;
          });
        return;
      }
      _this.typesId = _this.showtypesId;
      _this.getendlist();
    },
    changeindex(a) {
      this.dataType = a
      let _this = this;
      if (this.companyId == "") {
        this.$message({
          message: "请选择公司",
          type: "warning",
        });
        return;
      }
      if (_this.loading) {
        this.$confirm("请保存更改数据,否则数据将会丢失?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            _this.saveBind();
          })
          .catch(() => {
            _this.dataType = a;
            _this.loading = false;
          });
        return;
      }
      _this.dataType = a;
      this.table.item = this.itemList.filter((res) => res.dataType == this.dataType)
      this.table.require = this.requireList.filter((res) => res.dataType == this.dataType)
    },
    init() {
      // 检验项目+检验要求
      getCheckProjectList({ type: 1, companyId: this.companyId }).then((res) => {
        this.itemList = res.data
        this.table.item = this.itemList.filter((res) => res.dataType == this.dataType)
        this.$forceUpdate()
      })
      getCheckProjectList({ type: 2, companyId: this.companyId }).then((res) => {
        this.requireList = res.data
        this.table.require = this.requireList.filter((res) => res.dataType == this.dataType)
        this.$forceUpdate()
      })
    },
    /*获取检验类别*/
    getlist() {
      if (this.showleftitemId) {
        this.showtypesId = '';
        this.typesId = "";
        this.itemId = [];
        this.requireId = [];
        let data = {
          companyId: this.companyId,
          rawId: this.leftitemId,
          type: this.dataType,
        };
        if (this.dataType == 2) {
          data = {
            companyId: this.companyId,
            productId: this.leftitemId,
            type: this.dataType,
          };
        }
        getBindInfoList(data).then((res) => {
          this.loading = false;
          if (res.data) {
            this.showtable = res.data;
          } else {
            this.showtable = []
          }
        });
      }
    },
    /*获取多选框*/
    getendlist() {
      if (this.showtable.some((a) => a.typeId == this.typesId)) {
        let arr = this.showtable.find(
          (res) => res.typeId == this.typesId
        );
        this.itemId = arr.proList.map((res) => {
          return res.projectId;
        });
        this.requireId = arr.requireList.map((res) => {
          return res.requireId;
        });
      } else {
        this.itemId = [];
        this.requireId = [];
      }
    },
    saveBind() {
      if (this.companyId == "") {
        this.$message({
          message: "请选择公司",
          type: "warning",
        });
        return;
      }
      console.log(this.showtypesId);
      if (this.showleftitemId && this.showtypesId && this.itemId.length > 0 && this.requireId.length > 0) {
        let obj = new Object();
        if (this.dataType == 1) {
          obj.rawId = this.showleftitemId;
          obj.productId = ''
        } else {
          obj.productId = this.showleftitemId;
          obj.rawId = ''
        }
        obj.typeId = this.showtypesId
        obj.companyId = this.companyId;
        obj.qualityDetectionId = this.typesId;
        obj.proList = this.itemId.map((v) => {
          return { projectId: v }
        })
        obj.requireList = this.requireId.map((v) => {
          return { requireId: v }
        })
        saveOrUpdRawBindInfo(obj).then((res) => {
          if (res.code == 1001) {
            this.$message({
              message: '提交成功',
              type: 'success'
            });
            this.getlist();
          }
          this.loading = false;
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.radio-bg:hover .block {
  display: inline-block;
}
.block {
  display: none;
}
.active {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
  margin: 0 5px;
}
.none {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 5px;
  background: #808080;
}
.toptop {
  padding: 20px 20px 0 20px;
  @include discen_al;
  justify-content: space-between;
}
.info {
  height: 705px;
  padding: 20px;
}
.items {
  display: flex;
  height: 100%;
}
.item {
  flex: 1;
  border: 1px solid rgba(225, 229, 237, 1);
  border-radius: 4px;
  .item-title {
    color: #000000;
    background: #e1e5ed;
    font-size: 14px;
    @include discen;
    height: 56px;
    font-weight: bold;
  }
}
.el-radio {
  margin-right: 5px;
}
.radio {
  padding: 20px;
  .radio-bg {
    height: 28px;
  }
  i {
    color: #808080;
    margin-left: 5px;
  }
  i:hover {
    color: $bg_color;
  }
}
.item-hr {
  width: 20px;
  height: 20px;
}
.center {
  width: 24px;
  height: 100%;
}
.left {
  border: 1px solid rgba(225, 229, 237, 1);
  flex: 2;
  border-radius: 4px;
}
.right {
  flex: 5;
  border-radius: 4px;
}
.nav {
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: #e1e5ed;
  color: #000000;
  > div {
    font-size: 12px;
    font-weight: bold;
    height: 48px;
    //width: 50%;
    @include discen;
    cursor: pointer;
  }

  .left-active {
    color: $bg_color;
    border-radius: 8px 8px 0px 0px;
    background: #ffffff;
  }
}
.tabtop {
  width: 761px;
}
.radio {
  overflow: auto;
  padding: 20px;
  height: calc(100% - 56px);
  .radio-bg {
    height: 28px;
  }
}
.radio::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.radio::-webkit-scrollbar-track {
  background: rgb(239, 239, 239);
  border-radius: 2px;
}
.radio::-webkit-scrollbar-thumb {
  background: #bfbfbf;
  border-radius: 10px;
}
.radio::-webkit-scrollbar-thumb:hover {
  background: $bg_color;
}
.radio::-webkit-scrollbar-corner {
  background: $bg_color;
}
</style>
